<template>
	<div
		:class="[
			'app-editor-container',
			'app-mob-rating',
			`app-mob-rating-${name}`,
		]"
	>
		<van-rate
			v-bind="$attrs"
			class="rating__star"
			:disabled="disabled"
			v-model="curValue"
			@change="onChange"
		/>
	</div>
</template>
<script lang="ts" setup>
import { ratingProps } from './rating';
import { IEvent } from '@/core';
import { useEditorTypeParams } from "@/hooks/use-editor";
interface EditorEmit {
	(name: 'editor-event', value: IEvent<string>): void;
}
const props = defineProps(ratingProps);
const emit = defineEmits<EditorEmit>();
// 类型校验
const { validateConfig } = useEditorTypeParams();
validateConfig();
const curValue = computed(()=>{
	return props.value;
});

const onChange = (value: number) => {
	emit('editor-event', {
		name: `${props.name}`,
		action: 'valueChange',
		data: value,
	});
};
</script>
